<template>
  <div id="app">
    <div class="welcome-container">
      <div class="welcome-content">
        <h1 class="welcome-title">欢迎来到高校论文管理系统</h1>
        <p class="welcome-subtitle" style="margin-bottom:20px ;">在这里，您可以高效地管理您的论文。</p>
        <!-- <Router-link to="/table"> <button class="btn">进入系统~</button></Router-link> -->
        <el-form :model="form" :rules="rules" ref="loginForm" label-width="70px">
          <el-form-item label="用户名" prop="username" style="color: white;">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%;" type="primary" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

//默认样式
const form = reactive({
  username: 'txz',
  password: '123456'
})

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
  ]
})

const loginForm = ref(null)

const router = useRouter()

const submitForm = (formName) => {
  loginForm.value.validate((valid) => {
    if (valid) {

      if (form.username === 'txz' && form.password === '123456') {

        ElMessage({
          message: '登录成功',
          type: 'success',
          duration: 2000
        })
        router.push('/table')
      } else {
        ElMessage.error({
          message: '用户名或密码错误',
          type: 'error',
          duration: 2000
        })
      }
    } else {
      return false;
    }
  });
}

const resetForm = (formName) => {
  loginForm.value.resetFields();
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
  height: 100vh;
  /* 可选，使 #app 高度等于视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* 防止内容溢出 */
}

.welcome-container {
  position: relative;
  /* 允许子元素使用绝对定位 */
  width: 100%;
  height: 100%;
  /* 可选，根据需求调整 */
  background-image: url('@/assets/images/ffd89e6a1b22ff47.jpg');
  /* 背景图片 */
  background-size: cover;
  /* 覆盖整个容器 */
  background-position: center;
  /* 居中显示 */
  background-repeat: no-repeat;
  /* 不重复 */
}

.welcome-content {
  position: absolute;
  /* 绝对定位，相对于最近的已定位祖先元素（这里是 .welcome-container） */
  top: 30%;
  /* 距离顶部 50% */
  left: 60%;
  /* 距离左侧 50% */
  text-align: center;
  /* 文字居中 */
  color: white;
  /* 根据背景图片调整文字颜色以确保可读性 */
  padding: 20px;
  padding-right: 40px;
  /* 可选，增加内边距 */
  background-color: rgba(0, 0, 0, 0.5);
  /* 可选，半透明背景色以增加文字可读性（如果背景图片太亮或太复杂） */
  border-radius: 10px;
  /* 可选，圆角边框 */
}

.welcome-title {
  font-size: 2em;
  margin: 0;
  /* 移除默认的外边距 */
}

.welcome-subtitle {
  font-size: 1em;
  margin-top: 10px;
  /* 可选，增加顶部外边距 */
}

.btn {
  background-color: #7ed7e8;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;

  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
}

a {
  color: white;
  text-decoration: none;
}

:deep(.el-form-item__label) {
  color: #ffffff;
}
</style>